import { Modal, Input, Button } from 'antd'
import { useState } from 'react'

const { TextArea } = Input

export const CommentInputModal = ({ 
  visible, 
  onCancel, 
  onConfirm, 
  title = '添加评论',
  placeholder = '请输入评论内容...',
  confirmText = '确定',
  cancelText = '取消'
}) => {
  const [content, setContent] = useState('')
  const [loading, setLoading] = useState(false)

  const handleConfirm = async () => {
    if (!content.trim()) {
      return
    }

    setLoading(true)
    try {
      await onConfirm(content.trim())
      setContent('') // 清空内容
    } finally {
      setLoading(false)
    }
  }

  const handleCancel = () => {
    setContent('') // 清空内容
    onCancel()
  }

  return (
    <Modal
      title={title}
      open={visible}
      onCancel={handleCancel}
      footer={[
        <Button key="cancel" onClick={handleCancel}>
          {cancelText}
        </Button>,
        <Button 
          key="confirm" 
          type="primary" 
          loading={loading}
          disabled={!content.trim()}
          onClick={handleConfirm}
        >
          {confirmText}
        </Button>
      ]}
      destroyOnClose
      width={500}
    >
      <TextArea
        value={content}
        onChange={(e) => setContent(e.target.value)}
        placeholder={placeholder}
        rows={4}
        maxLength={500}
        showCount
        autoFocus
      />
    </Modal>
  )
}